<!-- <template>
    <div class="app-container">
      <div class="map-index">
        <baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler">
   
          <!-- 定位标记 -->
          <bm-marker v-for="marker of markers" :icon="{url: mapIcon, size: 
          {width: 52, height: 52}}" :position="{ lng: marker.lng, lat: marker.lat }" @click="lookDetail(marker)">
            <bm-info-window :title="infoWindow.info.name" :position="{ lng: infoWindow.info.lng, lat: infoWindow.info.lat }"
              :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
            </bm-info-window>
          </bm-marker>
   
          
          <!-- 搜索 -->
          <bm-local-search :pageCapacity="3" :keyword="address" :auto-viewport="true" :selectFirstResult="true" location="北京"></bm-local-search>
        </baidu-map>
   
        <!-- 搜索框 -->
        <div class="map-btn">
          <div class="map-search">
            <input type="text" v-model="address" placeholder="请输入北京地名" />
            <el-button icon="el-icon-search" circle></el-button>
          </div>
        </div>
      </div>
   
    </div>
  </template>
   
  <script>
  import { BaiduMap } from 'vue-baidu-map-3x'
  import mapIconPath from "../../../assets/ssss.png"
   
  export default {
    name: 'Worktrajectory',
    dicts: [],
    components: {
      BaiduMap
    },
    data() {
      return {
        BMap: {},
        map: {},
        mapIcon: mapIconPath,
        // 地图
        ak: 'X4SKfYs54pfWBe2PTuKo3vuzssYEPesT',
        center: { lng: 116.40353288113474, lat: 39.92279883697048 },
        zoom: 17,
        markers: [],
        infoWindow: {
          info: {}
        },
        address: "",
      }
    },
    created() {
      this.handler()
    },
    methods: {
      /** 获取地图 */
      handler({ BMap, map }) {
        console.log(BMap, map)
        this.BMap = BMap; 
        this.map = map; 
        this.center.lng = 116.40353288113474
        this.center.lat = 39.92279883697048
        this.zoom = 17
      },
   
      // 点击点坐标赋值
      lookDetail(marker) {
        marker.showFlag = true;
        this.infoWindow.info = marker;
      },
      // 关闭弹窗
      infoWindowClose(marker) {
        marker.showFlag = false
      },
      // 打开弹窗
      infoWindowOpen(marker) {
        marker.showFlag = true
      },
   
    },
   
  }
  </script>
  <style  scoped>
     .map-btn {
      width: 340px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      right: 10px;
      bottom: 10px;
   
 
    }
      .map {
      width: 100%;
      height: 420px;
    }
  .map-index {
    width: 100%;
    height: 420px;
    margin-bottom: 10px;
    z-index: 9;
    position: relative;
   
 
   
 
  }
  .map-search {
        width: 200px;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        border-radius: 18px;
        border: 1px solid #e4e7ec;
        overflow: hidden;
        margin-right: 10px;
   
     
      }
  input {
          width: 162px;
          height: 36px;
          padding-left: 15px;
          box-sizing: border-box;
          outline: none;
          border: none;
        }
  </style> -->